<!DOCTYPE html>
<html>
<head>
    <title>Responsive Slide</title>
    <link rel="stylesheet" href="css/myresponsiveSlide.css" type="text/css">
    <link rel="stylesheet" href="css/responsiveslides.css" type="text/css">
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/responsiveslides.min.js"></script>
    <script>
        $(function () {
            // Slideshow 3
            $("#slider3").responsiveSlides({
                manualControls: '#slider3-pager'
            });

        });
    </script>
</head>
<body>

<div id="slideshow">
    <div class="slideshow-wrapper">
        <div class="slideshow-stage">
            <ul id="slider3" class="rslides">
                <li>
                    <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
                    <div class="slideshow-stage-info">Some info 1</div>
                </li>
                <li>
                    <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
                    <div class="slideshow-stage-info">Some info 2</div>
                </li>
                <li>
                    <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>
                    <div class="slideshow-stage-info">Some info 3</div>
                </li>
                <li>
                    <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>
                    <div class="slideshow-stage-info">Some info 4</div>
                </li>
                <li>
                    <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>
                    <div class="slideshow-stage-info">Some info 5</div>
                </li>
            </ul>
        </div>
        <div class="slideshow-connect">
            <ul id="slider3-pager">
                <li >
                    <a href="#"> Text 1 </a>
                    <div class="slideshow-connect-full-bar"></div>
                </li>
                <li >
                    <a href="#"> Text 2 </a>
                    <div class="slideshow-connect-item-bar"></div>
                </li>
                <li >
                    <a href="#"> Text 3 </a>
                    <div class="slideshow-connect-item-bar"></div>
                </li>
                <li >
                    <a href="#"> Text 4 </a>
                    <div class="slideshow-connect-item-bar"></div>
                </li>
                <li >
                    <a href="#"> Text 5 </a>
                    <div class="slideshow-connect-item-bar"></div>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>